import { useState } from 'react'
import Button from '@mui/material/Button'
import { Checkbox, TextField } from '@mui/material';
import { List, ListItem } from '@mui/material';
interface Task {
  id: number;
  text: string;
  done: boolean;
}
function App() {
  const [inputValue, setInputValue] = useState('')
  const [searchValue, setSearchValue] = useState('')
  const [tasks, setTasks] = useState<Task[]>([])
  const [counter, setCounter] = useState(0)
  const addTask = () => {
    if (inputValue.trim() == '') return;
    setTasks(prev => [
      ...prev, {
        id: counter,
        text: inputValue,
        done: false
      }
    ]);
    setCounter(prev => prev + 1)
    setInputValue('');
  };
  const deleteTask = (id: number) => {
    setTasks(prev => prev.filter(task => task.id != id))
  };
  const toggleDone = (id: number) => {
    setTasks(prev => prev.map(task =>
      task.id == id ? { ...task, done: !task.done } : task
    ));
  };
  const filterTasks = tasks.filter(task => task.text.includes(searchValue));

  return (
    <div>
      <TextField type='text' value={inputValue} onChange={e => setInputValue(e.target.value)} placeholder='new task' />
      <Button onClick={addTask}>Add</Button>
      <br />
      <TextField type='text' value={searchValue} onChange={e => setSearchValue(e.target.value)} placeholder='search' />
      <List>
        {filterTasks.map(task => (
          <ListItem key={task.id} style={{ textDecoration: task.done ? 'line-through' : 'none' }}>
            <Checkbox checked={task.done} onChange={() => toggleDone(task.id)} />
            {task.text}
            <Button onClick={() => deleteTask(task.id)}>X</Button>
          </ListItem>
        ))}
      </List>
    </div>
  )
}

export default App
